<script setup lang="ts">
import { router } from '@/router';
import OnlineCode from '@/components/icons/OnlineCode.vue';
import Search from '@/components/icons/Search.vue';
import Topic from '@/components/icons/Topic.vue';
import Class from '@/components/icons/Class.vue';

const toUserCode = (_event: MouseEvent) => {
    router.push({
        name: 'UserCodeList'
    })
}

const toSubject = () => {
    router.push({
        name: 'Subject'
    })
}

const toClassroom = () => {
    router.push({
        name: 'Classroom'
    })
}

const toAISearch = () => {
    router.push({
        name: 'AISearch'
    })
}
</script>

<template>
    <div class="module">
        <div class="grid">
            <van-grid class="margin">
                <van-grid-item text="在线编程" @click="toUserCode">
                    <template #icon>
                        <OnlineCode></OnlineCode>
                    </template>
                </van-grid-item>
                <van-grid-item icon="photo-o" text="刷题测验" @click="toSubject">
                    <template #icon>
                        <Topic></Topic>
                    </template>
                </van-grid-item>
                <van-grid-item icon="photo-o" text="AI搜索" @click="toAISearch">
                    <template #icon>
                        <Search></Search>
                    </template>
                </van-grid-item>
                <van-grid-item text="我的课堂" @click="toClassroom">
                    <template #icon>
                        <Class></Class>
                    </template>
                </van-grid-item>
            </van-grid>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.module {
    display: flex;
    justify-content: center;
    width: 100%;

    .grid {
        width: 94%;
        border-radius: 15px;
        background-color: white;
        display: flex;

        .margin {
            width: 100%;
            margin: 3%;
        }
    }
}
</style>
